<template>
	<view>
		<!-- 发布遮罩 -->
		<!-- <u-popup v-model="showz" mode='bottom'> -->
		<u-mask :show="showz" @click="showz = false" :zoom="false" :mask-click-able='false'>
			<view class="warp1 " :style="{
				height:$height()+'px',
			   width:$width()+'px',
			}">
				<view class="warp1_1 ">
					<image @click.stop="showz=false" src="../../static/img/gb.png" mode=""
						style="width:64rpx ;height:64rpx ;display: block;margin:40rpx auto;" />
					<view class="warp1_2 ">
						<view class="" style="font-size: 32rpx;
						   text-align: center;
						  line-height: 130rpx;
                          font-family: OPPOSans;
                          font-weight: 600;
                           color: #181818;">
							套餐选择
						</view>
						<view class="" style="width: 100%;display: flex;justify-content: space-between;">
							<view class="warp1_2_1" @click.stop="type=index" v-for="(item,index) in info" :style="{
								border:type==index?'1px solid #FF1B1B':'',
							}">
								<view class="bt" :style="{
								background:type==index?'#FF1B1B':'',
								color:type==index?'#FFFFFF':''
							}">
									{{item.name}}
								</view>
								<view class="jg" :style="{
								color:type==index?'#FF1B1B':''
							}">
									<text>¥</text>
									<text>{{item.price}}</text>
								</view>
								<scroll-view :scroll-y="true" style="height:390rpx;">
									<view class="tc">
										<text>置顶{{item.day}}天</text>
										<u-icon size='28' :color="type==index?'#333333':'#333333'"
											name="checkbox-mark" />
									</view>
									<view class="tc" v-for="(items,indexs) in item.sign.split(',')">
										<text v-if="items==1">星标 </text>
										<text v-if="items==2">推荐</text>
										<text v-if="items==3">认证 </text>
										<text v-if="items==4">到店勘察 </text>
										<u-icon size='28' :color="type==index?'#333333':'#333333'"
											name="checkbox-mark" />
									</view>
								</scroll-view>
							</view>
							<!-- <view class="warp1_2_1" @click.stop="type=2" :style="{
									border:type==2?'1px solid #FF1B1B':'',
								}">
								<view class="bt" :style="{
									background:type==2?'#FF1B1B':'',
									color:type==2?'#FFFFFF':''
								}">
									套餐二
								</view>
								<view class="jg" :style="{
									color:type==2?'#FF1B1B':''
								}">
									<text>¥</text>
									<text>398.00</text>
								</view>
								<scroll-view :scroll-y="true" style="height:390rpx;">
									<view class="tc" v-for="(item,index) in 16">
										<text>置顶15天 </text>
										<u-icon size='28' :color="type==2?'#FF1B1B':'#333333'" name="checkbox-mark" />
									</view>
								</scroll-view>
							</view> -->
						</view>
						<view class="foot">
							<text>保存</text>
							<text @click="fk">去付款</text>
						</view>
					</view>
				</view>
			</view>
			<!-- </u-popup> -->
		</u-mask>
		<!-- 支付页面 -->
		<pay-ment ref='child' />
	</view>
</template>

<script>
	export default {
		name: "fb-pop",
		data() {
			return {
				showz: false,
				type: 0,
				info: {},
				form: {}
			};
		},
		mounted() {
			this.api('Info/getCost').then(res => {
				this.info = res.data
			})
		},
		methods: {
			wx_paly(result) {
				uni.requestPayment({
					provider: 'payment',
					timeStamp: result.timeStamp,
					nonceStr: result.nonceStr,
					package: result.package,
					paySign: result.paySign,
					signType: result.signType,
					success: (res) => {
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: (rest) => {
						uni.showToast({
							title: '支付失败',
							icon: 'error',
							duration: 2000
						});
					}
			
				})
			},
			// 购买保存
			fk() {
				this.api('Info/addInfo', {
					...this.form,
					is_draft: 0, //草稿
					cost_id: this.info[this.type].id
				}).then(res => {
					this.api('Info/costPayment', {
						buy_id: res.data.buy_id,
						type: 'wechat',
						info_id: res.data.info_id,
					}).then(res => {
						this.wx_paly(res.data)
					})
				})
				// this.showz = false
				// this.$refs.child.sign()
			},
			// 支付
			play() {

			},
			//跳转
			submit(a, b) {
				uni.navigateTo({
					url: `/pages/${a}/${a}?type=${b}`
				})
			},
			sign(a) {
				this.showz = true
				this.form = a
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp1 {
		position: relative;

		.fb {
			padding-bottom: constant(safe-area-inset-bottom) !important;
			;
			padding-bottom: env(safe-area-inset-bottom) !important;
			;

			image {
				width: 121rpx;
				height: 121rpx;
			}

			position: absolute;

			left: 50%;
			bottom:30rpx;
			z-index: 88888;
			transform: translateX(-50%);
		}

		.warp1_1 {
			padding-bottom: constant(safe-area-inset-bottom) !important;
			;
			padding-bottom: env(safe-area-inset-bottom) !important;
			;
			position: absolute;
			bottom: 0rpx;
			height: 995rpx;
			width: 100%;

			.warp1_2 {
				height: 895rpx;
				border-radius: 16rpx;
				background: white;
				position: relative;
				box-sizing: border-box;
				justify-content: space-between;
				padding: 0rpx 30rpx 30rpx 30rpx;

				.foot {
					z-index: 99;
					display: flex;
					justify-content: space-between;
					margin-top: 15rpx;
					padding: 10rpx;
					border-top: 1px solid #EEEEEE;

					text:nth-of-type(1) {
						text-align: center;
						line-height: 80rpx;
						width: 310rpx;
						display: block;
						height: 80rpx;
						border: 1rpx solid #FF1B1B;
						background: #FFFFFF;
						border-radius: 40rpx;
						font-size: 30rpx;
						font-family: OPPOSans;
						font-weight: 500;
						color: #FF1B1B;
					}

					text:nth-of-type(2) {
						text-align: center;
						line-height: 80rpx;
						width: 310rpx;
						display: block;
						height: 80rpx;
						background: #FF1B1B;
						border-radius: 40rpx;
						font-size: 30rpx;
						font-family: OPPOSans;
						font-weight: 500;
						color: #FFFFFF;
					}
				}

				.warp1_2_1 {
					width: 47%;
					height: 594rpx;
					background: #FFFFFF;
					border: 1px solid #F1F1F1;
					box-shadow: 0px 2rpx 12rpx 1tpx rgba(0, 0, 0, 0.07);
					border-radius: 20rpx;

					.jg {
						text-align: center;
						color: #333333;

						text:nth-of-type(1) {
							font-size: 30rpx;
							font-family: OPPOSans;
							line-height: 100rpx;
							font-weight: bold;
							margin-right: 10rpx;
						}

						text:nth-of-type(2) {
							line-height: 100rpx;
							font-size: 40rpx;
							font-family: OPPOSans;
							font-weight: bold;
						}
					}

					.tc {
						display: flex;
						line-height: 50rpx;
						justify-content: space-between;
						padding-left: 30rpx;
						padding-right: 30rpx;
						color: #333333;

						text {
							font-size: 26rpx;
							font-family: OPPOSans;
							font-weight: 400;
						}
					}

					.bt {
						text-align: center;
						height: 79rpx;
						background: #E9E9E9;
						border-radius: 20rpx 20rpx 0 0;
						line-height: 79rpx;
						font-size: 30rpx;
						font-family: OPPOSans;
						font-weight: 500;
						color: #333333;
					}
				}
			}


		}

	}
</style>
